<template>
    <div class="browse" ref="browse">
        <ul class="browseList" ref="browseList" v-show="loadingFlat" @scroll.passive="showNew($event)" @click="management">
            <li v-for="(item, index) in endArr" :key="index">
                <img :src="fn(item.url)" alt="" />
            </li>
        </ul>
        <loading v-show="!loadingFlat"></loading>
        <transition :duration="500" enter-active-class="animate__animated animate__fadeIn" leave-active-class="animate__animated animate__fadeOut">
            <div class="managementMask" v-show="flatMask" @click="hideMask($event)">
                <van-nav-bar :title="`第${Number(num) + 1}话`" left-text="返回" right-text="目录" left-arrow @click-left="pathGo" @click-right="togglePage" />
                <transition :duration="500" enter-active-class="animate__animated animate__fadeIn" leave-active-class="animate__animated animate__fadeOut">
                    <div class="page" v-show="flatPage">
                        <ul>
                            <li v-for="(item, index) in originalArr" :class="num == index ? 'active' : ''" @click="jumpPage(index)" :key="index">第{{ index + 1 }}章</li>
                        </ul>
                    </div></transition
                >
                <div class="pageLeft">
                    <span @click.stop="jian"><van-icon name="arrow-left" /></span>
                </div>
                <div class="pageRight">
                    <span @click.stop="jia"><van-icon name="arrow" /></span>
                </div>
            </div>
        </transition>
    </div>
</template>

<script>
import { getImageIndex, imageToken } from "../../request/index";
import "animate.css";
import loading from "@/components/loading.vue";
export default {
    name: "browse",
    components: {
        loading,
    },

    data() {
        return {
            num: 0,
            testArr: [],
            host: "https://manga.hdslb.com",
            token: 0,
            dimension: "@300w.jpg",
            imgArr: [],
            endArr: [],
            originalArr: [],
            uid: 0,
            flatMask: false,
            flatPage: false,
            timer: null,
            username: "游客",
            jumpFlat: false,
            gOb: false,
            loadingFlat: false,
        };
    },

    methods: {
        jia() {
            if (this.num < this.originalArr.length) {
                if (this.timer == null) {
                    this.timer = setTimeout(() => {
                        this.num++;
                        let index = this.originalArr[this.num].id;
                        this.endArr = [];
                        this.getII(index);
                        this.timer = null;
                    }, 1500);
                }
            }
        },
        jian() {
            if (this.num > 0) {
                if (this.timer == null) {
                    this.timer = setTimeout(() => {
                        this.num--;
                        let index = this.originalArr[this.num].id;
                        this.endArr = [];
                        this.getII(index);
                        this.timer = null;
                    }, 1500);
                }
            }
        },
        getII(x = this.originalArr[this.num].id) {
            getImageIndex({ ep_id: x })
                .then((data) => {
                    this.testArr = data.data.images;
                    this.imgArr = data.data.images.map((item) => {
                        return '"' + this.host + item.path + this.dimension + '"';
                    });
                    if (localStorage.getItem("loginUser")) {
                        this.username = JSON.parse(localStorage.getItem("loginUser"))["username"];
                    }
                    let newData = { yyid: this.username, uid: this.uid, num: this.num, flat: 0 };
                    let local = [];
                    if (JSON.parse(localStorage.getItem("record"))) {
                        local = JSON.parse(localStorage.getItem("record"));
                    }
                    let iIndex = local.find((item) => {
                        return item.uid == newData.uid && item["yyid"] == this.username;
                    });

                    if (!iIndex) {
                        local.push(newData);
                    } else {
                        iIndex["num"] = this.num;
                    }
                    localStorage.setItem("record", JSON.stringify(local));
                    return this.imgArr;
                })
                .then((content) => {
                    imageToken({ urls: "[" + content + "]" }).then((data) => {
                        let newArr = data.data;
                        newArr.map((item) => {
                            item.url += "?token=" + item.token;
                        });
                        newArr.map((item) => {
                            this.endArr.push(item);
                        });
                    });
                })
                .then(() => {
                    this.loadingFlat = true;
                    setTimeout(() => {
                        this.jumpFlat = false;
                    }, 3000);
                });
        },
        fn(x) {
            return x;
        },
        pathGo() {
            this.$router.go(-1);
        },
        jumpPage(x) {
            if (this.num == x) {
                return;
            } else {
                this.endArr = [];
                this.num = x;
                let index = this.originalArr[this.num].id;
                this.getII(index);
            }
        },
        management() {
            this.flatMask = !this.flatMask;
        },
        hideMask(e) {
            if (e.offsetY > 100 && e.offsetY < 560) {
                this.flatMask = !this.flatMask;
                this.flatPage = false;
            }
        },
        togglePage() {
            this.flatPage = !this.flatPage;
        },
        showNew(e) {
            if (e.srcElement.scrollHeight - e.srcElement.scrollTop <= 3000) {
                if (!this.jumpFlat) {
                    this.num++;
                    let index = this.originalArr[this.num].id;

                    this.getII(index);

                    this.jumpFlat = true;
                } else {
                }
            }
            if (e.srcElement.scrollTop == 0) {
                if (this.num == 0) {
                    this.$toast({
                        message: "没有上一页了",
                        position: "top",
                    });
                } else if (this.num > 0) {
                    this.num--;
                    console.log(this.num);
                    let newTop = 0;
                    let index = this.originalArr[this.num].id;
                    this.endArr = [];
                    e.srcElement.scrollTop = newTop;
                    this.getII(index);
                }
            }
        },
    },
    created() {
        this.num = this.$route.query.num;
        this.uid = this.$route.query.count;
        this.originalArr = JSON.parse(this.$route.query.arr).reverse();
        this.getII();
        this.loadingFlat = false;
    },
};
</script>

<style lang="scss" scope>
@import url(../../static/style/reset.css);
@import "../../static/style/variable.scss";
.browse {
    position: relative;
    .van-nav-bar__text {
        color: #fdcbf1;
    }
    .van-nav-bar .van-icon {
        color: #fdcbf1;
    }
}
.page {
    max-height: 50vh;
    min-height: 10vh;
    background-color: rgb(253, 244, 254);
    width: 2.6667rem;
    position: absolute;
    right: 0;
    top: 25%;
    overflow: scroll;
    border-radius: 0.16rem;
    padding: 0.16rem;
    transform: scale(0.85);
    z-index: 99;
    ul {
        display: flex;
        flex-direction: column;
        align-items: center;
        li {
            font-size: 0.3467rem;
            padding: 0.2667rem 0;
            background-color: white;
            // background: url("../../static/images/background.gif") center center;
            width: 98%;
            color: $bgColor;
            margin: 0.2133rem auto 0;
            box-sizing: border-box;
            text-align: center;
            border-radius: 0.16rem;
            &:nth-child(1) {
                margin-top: 0;
            }
            &.active {
                background-color: pink;
                color: white;
            }
        }
    }
}
.managementMask {
    position: absolute;
    top: 0;
    height: 100%;
    width: 100%;

    .pageRight,
    .pageLeft {
        height: 100%;
        width: 30%;
        position: absolute;
        top: 0;
        font-size: 0.96rem;
        font-weight: 100;
        color: aliceblue;
        display: flex;
        align-items: center;
        span {
            background: rgba($color: #5c3a53, $alpha: 0.7);
            border-radius: 50%;
            margin: 0 auto;
            padding: 0.5333rem;
        }
    }
    .pageLeft {
        left: 0;
    }
    .pageRight {
        right: 0;
    }
}
.browseList {
    width: 100%;
    height: 100vh;
    overflow: scroll;
    background: white;
    font-size: $fontSize;
    li {
        width: 100%;
        position: relative;

        img {
            vertical-align: middle;

            width: 100%;
        }
    }
}
</style>
